<template>
  <!-- 叫号 -->
  <div>
    <div style="text-align:right;">
      <el-form :inline="true" @submit.native.prevent="onSearchJiaoHao(-1)">
        <el-form-item style="margin-bottom:0;">
          <deptSearch v-model="jiaoHaoForm.deptId" @change="onChangeDept"></deptSearch>
        </el-form-item>
        <el-form-item style="margin-bottom:0;">
          <doctorSearch ref="jiaohaoDoctorSearch" v-model="jiaoHaoForm.doctorId" :deptId="jiaoHaoForm.deptId"></doctorSearch>
        </el-form-item>
        <el-form-item style="margin-bottom:0;">
          <el-button type="primary" native-type="submit" circle icon="el-icon-search"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <br>
    <div class="form-tool yy-data-box">
      <div class="p-sm">
        <div style="font-size:16px;" class="error-color">失约列表</div>
        <br>
        <table class="table-box">
          <thead>
            <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>科室</th>
              <th>预约医生</th>
              <th>电话</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in jiaoHaoObj.invalidList" :key="index">
              <td>{{item.patientInfo.name}}</td>
              <td>{{item.patientInfo.sex|toSex}}</td>
              <td>{{item.deptName}}</td>
              <td>{{item.doctorName}}</td>
              <td>{{item.patientInfo.mobile}}</td>
              <td>
                <el-link type="primary" @click="onActivateUser(item,index)">激活</el-link>
              </td>
            </tr>
          </tbody>
        </table>
        <br>
        <pager v-model="jiaoHaoObj.invalidPager" @change-pagenum="getInvalidList"></pager>
      </div>
      <div class="p-sm">
        <div style="font-size:16px;" class="success-color">叫号队列</div>
        <br>
        <table class="table-box">
          <thead>
            <tr>
              <th>排号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>科室</th>
              <th>诊室</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in jiaoHaoObj.queueList" :key="index" :class="[item.registerStatus==5?'primary-color':'']">
              <td>{{item.sourceCode}}</td>
              <td>{{item.patientInfo.name}}</td>
              <td>{{item.patientInfo.sex|toSex}}</td>
              <td>{{item.hpDepartment.deptName}}</td>
              <td>{{item.hpDiagnosisRoom.roomName}}</td>
              <td>{{item.registerStatus==5?"就诊中":"候诊中"}}</td>
              <td>
                <el-link v-if="item.registerStatus!=5" type="primary" @click="onjiaoHaoCancel(item,index)">过号</el-link>
                &nbsp;
                <el-link v-if="index>0&&item.registerStatus!=5" type="primary" @click="onTopUser(item)">置顶</el-link>
              </td>
            </tr>
          </tbody>
        </table>
        <br>
        <div v-if="jiaoHaoObj.queueList.length == 0" style="color:#999;padding:10px 0;text-align:center;">
          <i class="iconfont iconwushuju" style="font-size:40px;"></i>
          <div>暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    deptSearch: () => import("@/pages/_com/deptSearch.vue"),
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue")
  },
  data() {
    return {
      jiaoHaoForm: {
        deptId: "",
        dateDay: "",
        doctorId: ""
      },
      jiaoHaoObj: {
        jiaoHaoTimer: null,
        queuePager: { pageSize: 20, pageNum: 1, total: 0 },
        invalidPager: { pageSize: 20, pageNum: 1, total: 0 },
        queueList: [], //叫号队列
        invalidList: [] //失约队列
      }
    };
  },
  created() {
    let th = this;
    th.jiaoHaoForm.dateDay = th.$utils.FormatTime(
      "yyyy-MM-dd",
      new Date().getTime()
    );
    th.onSearchJiaoHao();
  },
  mounted() {
    let th = this;
    th.jiaoHaoObj.jiaoHaoTimer = setInterval(() => {
      th.getJiaoHaoQueue();
    }, 3000);
  },
  methods: {
    //叫号搜索功能
    onSearchJiaoHao() {
      let th = this;
      th.getJiaoHaoQueue();
      th.getInvalidList(-1);
    },
    //激活用户
    onActivateUser(obj, index) {
      let th = this;
      let j = {
        id: obj.id
      };
      th.showLoading();
      th.$api
        .callOrderactivePassOrder(j)
        .then(res => {
          if (res.executed) {
            th.$message.success("激活成功");
            th.jiaoHaoObj.invalidList.splice(index, 1);
            th.jiaoHaoObj.invalidPager.total--;
          } else {
            th.$message.error(res.message);
          }
          th.showLoading(false);
        })
        .catch(() => {
          th.showLoading(false);
        });
    },
    //查询失约列表
    getInvalidList(type) {
      let th = this;
      if (type == -1) {
        th.jiaoHaoObj.invalidPager.total = 0;
        th.jiaoHaoObj.invalidPager.pageNum = 1;
      }
      let j = {
        status: 3,
        dateDayStart: th.jiaoHaoForm.dateDay,
        dateDayEnd: th.jiaoHaoForm.dateDay
      };
      Object.assign(j, th.jiaoHaoForm, th.jiaoHaoObj.invalidPager);
      delete j.dateDay;
      th.$api.getRegisterListInfo(j).then(res => {
        if (res.executed) {
          th.jiaoHaoObj.invalidList = res.dataBody.list;
          th.jiaoHaoObj.invalidPager.total = res.dataBody.total;
        }
      });
    },
    //置顶患者
    onTopUser(obj) {
      let th = this;
      th.$confirm(`确定置顶患者?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let j = {
            id: obj.id
          };
          th.showLoading();
          th.$api.callOrdertopOrder(j).then(res => {
            if (res.executed) {
              th.$message.success("置顶成功");
            } else {
              th.$message.error(res.message);
            }
            th.showLoading(false);
          });
        })
        .catch(() => {
          th.showLoading(false);
        });
    },
    //过号
    onjiaoHaoCancel(obj, index) {
      let th = this;
      th.$confirm(`确定过号?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let j = {
            id: obj.id,
            callStaus: 0
          };
          th.showLoading();
          th.$api.callOrderpassOrder(j).then(res => {
            if (res.executed) {
              th.$message.success("过号成功");
              th.jiaoHaoObj.queueList.splice(index, 1);
              th.jiaoHaoObj.queuePager.total--;
              th.getInvalidList();
            } else {
              th.$message.error(res.message);
            }
            th.showLoading(false);
          });
        })
        .catch(() => {
          th.showLoading(false);
        });
    },
    //获取叫号队列
    getJiaoHaoQueue() {
      let th = this;
      let j = {
        status: "5,6"
      };
      Object.assign(j, th.jiaoHaoForm, th.jiaoHaoObj.queuePager);
      th.$api.getDoctorRegisterList(j).then(res => {
        if (res.executed) {
          th.jiaoHaoObj.queueList = res.dataBody.list;
          th.jiaoHaoObj.queuePager.total = res.dataBody.total;
        }
      });
    },
    //科室改变
    onChangeDept() {
      let th = this;
      th.jiaoHaoForm.doctorId = "";
      th.$nextTick(function() {
        th.$refs["jiaohaoDoctorSearch"].getData();
      });
    }
  },
  beforeDestroy() {
    let th = this;
    clearInterval(th.jiaoHaoObj.jiaoHaoTimer);
  }
};
</script>
<style lang="scss" scoped>
.yy-data-box {
  align-items: stretch;
  > div:nth-child(2) {
    width: 50%;
    border-left: 1px solid #eee;
  }
}
</style>